/*
  学习目标：React绑定事件
  语法: on+驼峰事件名 = {函数}
  1. 少量代码 : 箭头函数
  2. 多行代码: 自定义事件处理函数

  注意: 💥事件绑定的是函数, 不能是函数的调用
*/

import React from 'react';

export default class App extends React.Component {
  handleClick() {
    console.log('你点了我  ----->  ');
    alert('多行代码的时候,用我');
  }

  render() {
    return (
      <div>
        <button
          // 少量代码， 直接用箭头函数
          onClick={() => alert('1234')}
        >
          点我1
        </button>
        <br />
        <button
          // 多行代码时, 定义自定义处理函数, 通过this绑定函数
          onClick={this.handleClick}
        >
          点我2
        </button>

        <button
          // ❌错误的写法
          // 💥事件绑定的是函数, 不能是函数的调用
          onClick={this.handleClick()}
        >
          点我2
        </button>
      </div>
    );
  }
}
